<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <a-drawer
    :title="!dataForm.imgid ? '添加' : '修改'"
    :visible="visible"
    @close="cancel"
    :body-style="{ paddingBottom: '80px' }"
    :width="720"
  >
    <!-- 新增和创建表单表单 -->
    <el-form :model="dataForm" :rules="dataRule"  v-loading="loading" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="80px" style="padding: 0px 10px;margin: 0px 50px">
      <el-form-item label="图片名" >
        <el-input v-model="dataForm.imgname" placeholder="图片名" size="small"></el-input>
      </el-form-item>
      <el-form-item label="图片路径" >
<!--        <el-input v-model="dataForm.imgpath" placeholder="图片路径" size="small"></el-input>-->

        <upload text="图片" style="display: inline-block" ref="childData"
                :file-list="dataForm.imgpath" v-model="dataForm.imgpath"
        />

      </el-form-item>
      <el-form-item label="图片类型(1首页轮播图,2EOS专区)" >
        <el-input v-model="dataForm.imgtype" placeholder="图片类型(1首页轮播图,2EOS专区)" size="small"></el-input>
      </el-form-item>
      <el-form-item label="图片版块，0，首页，1，云玩" >
        <el-input v-model="dataForm.imgblock" placeholder="图片版块，0，首页，1，云玩" size="small"></el-input>
      </el-form-item>
      <el-form-item label="图片外键id" >
        <el-input v-model="dataForm.imgforeignkey" placeholder="图片外键id" size="small"></el-input>
      </el-form-item>
      <el-form-item label="网址" >
        <el-input v-model="dataForm.imgadderss" placeholder="网址" size="small"></el-input>
      </el-form-item>
      <el-form-item label="创建时间" >
        <el-input v-model="dataForm.createtime" placeholder="创建时间" size="small"></el-input>
      </el-form-item>
      <el-form-item label="修改时间" >
        <el-input v-model="dataForm.modifytime" placeholder="修改时间" size="small"></el-input>
      </el-form-item>
    </el-form>
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
    >
      <el-button @click="cancel()" :style="{ marginRight: '8px' }">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </div>



  </a-drawer>
</template>

<script>
  import * as api from '@/api/imgentity'
  import upload from '@/components/Upload/uploadImg'

  export default {
    components: {
      upload,
    },
    data () {
      return {
        visible: false,
        loading:false,
        dataForm: {
          imgid: 0,
          imgname: '' ,
          imgpath: '' ,
          imgtype: '' ,
          imgblock: '' ,
          imgforeignkey: '' ,
          imgadderss: '' ,
          createtime: '' ,
          modifytime: ''
        },
        dataRule: {
          imgname: [
            { required: true, message: '图片名  为必填项', trigger: 'blur' }
          ],
          imgpath: [
            { required: true, message: '图片路径  为必填项', trigger: 'blur' }
          ],
          imgtype: [
            { required: true, message: '图片类型(1首页轮播图,2EOS专区)  为必填项', trigger: 'blur' }
          ],
          imgblock: [
            { required: true, message: '图片版块，0，首页，1，云玩  为必填项', trigger: 'blur' }
          ],
          imgforeignkey: [
            { required: true, message: '图片外键id  为必填项', trigger: 'blur' }
          ],
          imgadderss: [
            { required: true, message: '网址  为必填项', trigger: 'blur' }
          ],
          createtime: [
            { required: true, message: '创建时间  为必填项', trigger: 'blur' }
          ],
          modifytime: [
            { required: true, message: '修改时间  为必填项', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) { // 初始化表单验证规则
        this.dataForm.imgid = id || 0
        this.visible = true
        this.$nextTick(() => {

          if (this.dataForm.imgid>0){
            this.loading = true
            api.info({imgid:this.dataForm.imgid}).then(res => {
              this.dataForm = res;
            }).finally(() => {
              this.loading = false
            });
          }
        })
      },cancel(){
        this.visible = false
        this.reset()
      },
      // 表单数据提交
      submit () {
       // console.error(this.$refs["childData"].fileList)
        console.error(
        this.$refs["childData"].fileList.map(item => {return item.url}).join(','))


        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            let postData=Object.assign({},this.dataForm)
            if (this.dataForm.imgid==0){
              postData.imgid==undefined
              api.save(postData).then(res =>{
                this.$message.success("创建成功")
                this.$parent.getDataList()
                this.reset()
              }).finally(() => {
                this.loading = false
                this.visible = false
              });
            }else{
              api.update(postData).then(res =>{
                this.$message.success("保存成功")
                this.$parent.getDataList()
                this.reset()
              }).finally(() => {
                this.loading = false
                this.visible = false
              });
            }
          }
        })
      },
      reset(){
        this.$refs.dataForm.resetFields()
        this.$data.dataForm=JSON.parse(JSON.stringify(this.$options.data().dataForm))
        this.$refs["childData"].fileList=[]
      }
    }
  }
</script>
